npm install webpack webpack-cli webpack-dev-server --save-dev
            

              
                Copy
              
            
          

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index',
 output: {
 publicPath: 'http://localhost:3000/',
 },
 devServer: {
 port: 3000,
 hot: true,
 historyApiFallback: true, // For single page application routing
 },
 module: {
  rules: [
  {
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
    loader: 'babel-loader',
    options: {
     presets: ['@babel/preset-env', '@babel/preset-react']
    }
   }
  },
  {
   test: /\.css$/,
   use: ['style-loader', 'css-loader']
  }
 ]
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'Host',
 filename: 'remoteEntry.js',
 remotes: {
 // Define remotes here, e.g., 'RemoteApp': 'RemoteApp@http://localhost:3001/remoteEntry.js'
 'RemoteApp': 'RemoteApp@http://localhost:3001/remoteEntry.js'
 },
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Add other shared dependencies here
 },
 }),
 // ... other plugins
 ],
};

            

              
                Copy
              
            
          

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index',
 output: {
 publicPath: 'http://localhost:3001/',
 },
 devServer: {
 port: 3001,
 hot: true,
 historyApiFallback: true, // For single page application routing
 },
 module: {
  rules: [
  {
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
    loader: 'babel-loader',
    options: {
     presets: ['@babel/preset-env', '@babel/preset-react']
    }
   }
  },
  {
   test: /\.css$/,
   use: ['style-loader', 'css-loader']
  }
 ]
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'RemoteApp',
 filename: 'remoteEntry.js',
 exposes: {
 './Widget': './src/Widget',
 // Add other exposed modules here
 },
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Add other shared dependencies here
 },
 }),
 // ... other plugins
 ],
};

            

              
                Copy
              
            
          

            import React from 'react';

const Widget = () => {
 return (
  

  
Remote Widget
  
This is a widget from the RemoteApp.
  
 );
};

export default Widget;

            

              
                Copy
              
            
          

            import React, { useState, useEffect } from 'react';

const RemoteWidget = React.lazy(() => import('RemoteApp/Widget'));

const App = () => {
 const [isWidgetLoaded, setIsWidgetLoaded] = useState(false);

 useEffect(() => {
  setIsWidgetLoaded(true);
 }, []);

 return (
  

  
Host Application
  
This is the host application.
  {isWidgetLoaded ? (
   Loading Widget...
}>
   
   
  ) : (
   
Loading...
  )}
  

Förklaring:

• React.lazy(() => import('RemoteApp/Widget')): Detta importerar dynamiskt Widget-modulen från RemoteApp. Namnet RemoteApp motsvarar det namn som definierats i remotes-sektionen i värdens Webpack-konfiguration. Widget motsvarar modulnamnet som definierats i exposes-sektionen i fjärrapplikationens Webpack-konfiguration.
• React.Suspense: Detta används för att hantera den asynkrona laddningen av fjärrmodulen. fallback-propen specificerar en komponent att rendera medan modulen laddas.

6. Kör applikationerna:

Starta både värd- och fjärrapplikationerna med npm start (eller din föredragna metod). Se till att fjärrapplikationen körs *före* värdapplikationen.

Du bör nu se fjärr-widgeten renderad inuti värdapplikationen.

Avancerade tekniker för Module Federation

Utöver den grundläggande konfigurationen erbjuder Module Federation flera avancerade tekniker för att bygga sofistikerade mikro-frontend-arkitekturer.

1. Versionshantering och delning:

Att hantera delade beroenden effektivt är avgörande för att bibehålla stabilitet och undvika konflikter. Module Federation tillhandahåller mekanismer för att specificera versionsintervall och singleton-instanser av delade moduler. Genom att använda shared-egenskapen i Webpack-konfigurationen kan du kontrollera hur delade moduler laddas och hanteras.

Exempel:

            shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 lodash: { eager: true, version: '4.17.21' }
}

            

              
                Copy
              
            
          

• singleton: true: Säkerställer att endast en instans av modulen laddas, vilket förhindrar duplicering och minskar paketstorleken. Detta är särskilt viktigt för bibliotek som React och ReactDOM.
• requiredVersion: Specificerar det versionsintervall som applikationen kräver. Webpack kommer att försöka ladda en kompatibel version av modulen.
• eager: true: Laddar modulen omedelbart istället för "lazy" (lat). Detta kan förbättra prestandan i vissa fall, men kan också öka den initiala paketstorleken.

2. Dynamisk Module Federation:

Istället för att hårdkoda URL:erna till fjärrapplikationer kan du ladda dem dynamiskt från en konfigurationsfil eller en API-slutpunkt. Detta gör att du kan uppdatera mikro-frontend-arkitekturen utan att behöva driftsätta om värdapplikationen.

Exempel:

Skapa en konfigurationsfil (t.ex. remote-config.json) som innehåller URL:erna till fjärrapplikationerna:

            {
 "RemoteApp": "http://localhost:3001/remoteEntry.js",
 "AnotherRemoteApp": "http://localhost:3002/remoteEntry.js"
}

            

              
                Copy
              
            
          

I värdapplikationen, hämta konfigurationsfilen och skapa dynamiskt remotes-objektet:

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');
const fs = require('fs');

module.exports = {
 // ... other configurations
 plugins: [
 new ModuleFederationPlugin({
 name: 'Host',
 filename: 'remoteEntry.js',
 remotes: new Promise(resolve => {
  fs.readFile(path.resolve(__dirname, 'remote-config.json'), (err, data) => {
  if (err) {
  console.error('Error reading remote-config.json:', err);
  resolve({});
  } else {
  try {
  const remotesConfig = JSON.parse(data.toString());
  resolve(remotesConfig);
  } catch (parseError) {
  console.error('Error parsing remote-config.json:', parseError);
  resolve({});
  }
  }
  });
 }),
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Add other shared dependencies here
 },
 }),
 // ... other plugins
 ],
};

            

              
                Copy
              
            
          

Viktigt att notera: Överväg att använda en mer robust metod för att hämta fjärrkonfigurationen i en produktionsmiljö, till exempel en API-slutpunkt eller en dedikerad konfigurationstjänst. Exemplet ovan använder fs.readFile för enkelhetens skull, men detta är generellt sett inte lämpligt för produktionsdriftsättningar.

3. Anpassade laddningsstrategier:

Module Federation låter dig anpassa hur fjärrmoduler laddas. Du kan implementera anpassade laddningsstrategier för att optimera prestanda eller hantera specifika scenarier, som att ladda moduler från en CDN eller använda en service worker.

Webpack exponerar "hooks" som låter dig fånga upp och ändra modulladdningsprocessen. Detta möjliggör finkornig kontroll över hur fjärrmoduler hämtas och initialiseras.

4. Hantering av CSS och stilar:

Att dela CSS och stilar mellan mikro-frontends kan vara knepigt. Module Federation stöder olika tillvägagångssätt för att hantera stilar, inklusive:

• CSS-moduler: Använd CSS-moduler för att kapsla in stilar inom varje mikro-frontend, vilket förhindrar konflikter och säkerställer konsekvens.
• Styled Components: Använd "styled components" eller andra CSS-in-JS-bibliotek för att hantera stilar inom komponenterna själva.
• Globala stilar: Ladda globala stilar från ett delat bibliotek eller CDN. Var försiktig med detta tillvägagångssätt, eftersom det kan leda till konflikter om stilarna inte är korrekt namngivna (namespaced).

Exempel med CSS-moduler:

Konfigurera Webpack för att använda CSS-moduler:

            module: {
 rules: [
 {
 test: /\.module\.css$/,
 use: [
 'style-loader',
 {
 loader: 'css-loader',
 options: {
 modules: {
 localIdentName: '[name]__[local]--[hash:base64:5]',
 },
 importLoaders: 1,
 },
 },
 'postcss-loader',
 ],
 },
 // ... other rules
],
}

            

              
                Copy
              
            
          

Importera CSS-moduler i dina komponenter:

            import React from 'react';
import styles from './Widget.module.css';

const Widget = () => {
 return (
  

  
Remote Widget
  
This is a widget from the RemoteApp.
  
 );
};

export default Widget;

            

              
                Copy
              
            
          

5. Kommunikation mellan mikro-frontends:

Mikro-frontends behöver ofta kommunicera med varandra för att utbyta data eller utlösa åtgärder. Det finns flera sätt att uppnå detta:

• Delade händelser (Events): Använd en global händelsebuss för att publicera och prenumerera på händelser. Detta gör att mikro-frontends kan kommunicera asynkront utan direkta beroenden.
• Anpassade händelser: Använd anpassade DOM-händelser för kommunikation mellan mikro-frontends på samma sida.
• Delad state management: Använd ett delat state management-bibliotek (t.ex. Redux, Zustand) för att centralisera state och underlätta datadelning.
• Direkta modulimporter: Om mikro-frontends är tätt kopplade kan du importera moduler direkt från varandra med Module Federation. Detta tillvägagångssätt bör dock användas sparsamt för att undvika att skapa beroenden som underminerar fördelarna med mikro-frontends.
• API:er och tjänster: Mikro-frontends kan kommunicera med varandra genom API:er och tjänster, vilket möjliggör lös koppling och större flexibilitet. Detta är särskilt användbart när mikro-frontends driftsätts på olika domäner eller har olika säkerhetskrav.

Fördelar med att använda Module Federation för mikro-frontends

• Förbättrad skalbarhet: Mikro-frontends kan skalas oberoende, vilket gör att du kan allokera resurser där de behövs mest.
• Ökad underhållbarhet: Mindre kodbaser är lättare att förstå och underhålla, vilket minskar risken för buggar och förbättrar utvecklarproduktiviteten.
• Snabbare driftsättningscykler: Mikro-frontends kan driftsättas oberoende, vilket möjliggör snabbare iterationscykler och snabbare lansering av nya funktioner.
• Teknisk mångfald: Team kan välja de teknologier och ramverk som bäst passar deras behov, vilket främjar innovation och möjliggör användning av specialiserade färdigheter.
• Förbättrad teamautonomi: Varje mikro-frontend ägs av ett dedikerat team, vilket främjar ägarskap och ansvarsskyldighet.
• Förenklad onboarding: Nya utvecklare kan snabbt komma igång med mindre, mer hanterbara kodbaser.

Utmaningar med att använda Module Federation

• Ökad komplexitet: Mikro-frontend-arkitekturer kan vara mer komplexa än traditionella monolitiska arkitekturer, vilket kräver noggrann planering och samordning.
• Hantering av delade beroenden: Att hantera delade beroenden kan vara utmanande, särskilt när olika mikro-frontends använder olika versioner av samma bibliotek.
• Kommunikations-overhead: Kommunikation mellan mikro-frontends kan introducera overhead och latens.
• Integrationstestning: Att testa integrationen av mikro-frontends kan vara mer komplicerat än att testa en monolitisk applikation.
• Initial installations-overhead: Att konfigurera Module Federation och sätta upp den initiala infrastrukturen kan kräva betydande ansträngning.

Verkliga exempel och användningsfall

Module Federation används av ett växande antal företag för att bygga stora, komplexa webbapplikationer. Här är några verkliga exempel och användningsfall:

• E-handelsplattformar: Stora e-handelsplattformar använder ofta mikro-frontends för att hantera olika delar av webbplatsen, som produktkatalogen, varukorgen och utcheckningsprocessen. Till exempel kan en tysk återförsäljare använda en separat mikro-frontend för att visa produkter på tyska, medan en fransk återförsäljare använder en annan mikro-frontend för franska produkter, båda integrerade i en enda värdapplikation.
• Finansiella institutioner: Banker och finansiella institutioner använder mikro-frontends för att bygga komplexa bankapplikationer, såsom internetbankportaler, investeringsplattformar och handelssystem. En global bank kan ha team i olika länder som utvecklar mikro-frontends för olika regioner, var och en anpassad till lokala regler och kundpreferenser.
• Content Management Systems (CMS): CMS-plattformar kan använda mikro-frontends för att låta användare anpassa utseendet och funktionaliteten på sina webbplatser. Till exempel kan ett kanadensiskt företag som tillhandahåller CMS-tjänster låta användare lägga till eller ta bort olika mikro-frontends (widgets) på sin webbplats för att anpassa dess funktionalitet.
• Instrumentpaneler och analysplattformar: Mikro-frontends är väl lämpade för att bygga instrumentpaneler och analysplattformar, där olika team kan bidra med olika widgets och visualiseringar.
• Sjukvårdsapplikationer: Sjukvårdsleverantörer använder mikro-frontends för att bygga patientportaler, elektroniska journalsystem (EHR) och telemedicinplattformar.

Bästa praxis för att implementera Module Federation

För att säkerställa framgången med din Module Federation-implementering, följ dessa bästa praxis:

• Planera noggrant: Innan du börjar, planera noggrant din mikro-frontend-arkitektur och definiera tydliga gränser mellan de olika applikationerna.
• Etablera tydliga kommunikationskanaler: Etablera tydliga kommunikationskanaler mellan de team som är ansvariga för de olika mikro-frontends.
• Automatisera driftsättning: Automatisera driftsättningsprocessen för att säkerställa att mikro-frontends kan driftsättas snabbt och tillförlitligt.
• Övervaka prestanda: Övervaka prestandan för din mikro-frontend-arkitektur för att identifiera och åtgärda eventuella flaskhalsar.
• Implementera robust felhantering: Implementera robust felhantering för att förhindra kedjereaktioner av fel och säkerställa att applikationen förblir motståndskraftig.
• Använd en konsekvent kodstil: Upprätthåll en konsekvent kodstil över alla mikro-frontends för att förbättra underhållbarheten.
• Dokumentera allt: Dokumentera din arkitektur, dina beroenden och kommunikationsprotokoll för att säkerställa att systemet är väl förstått och underhållbart.
• Överväg säkerhetskonsekvenser: Överväg noggrant säkerhetskonsekvenserna av din mikro-frontend-arkitektur och implementera lämpliga säkerhetsåtgärder. Säkerställ efterlevnad av globala dataskyddsförordningar som GDPR och CCPA.

Slutsats

JavaScript Module Federation med Webpack 5 erbjuder ett kraftfullt och flexibelt sätt att bygga mikro-frontend-arkitekturer. Genom att dela upp stora applikationer i mindre, oberoende driftsättningsbara enheter kan du förbättra skalbarhet, underhållbarhet och teamautonomi. Även om det finns utmaningar med att implementera mikro-frontends, överväger fördelarna ofta kostnaderna, särskilt för komplexa webbapplikationer. Genom att följa de bästa praxis som beskrivs i denna guide kan du framgångsrikt utnyttja Module Federation för att bygga robusta och skalbara mikro-frontend-arkitekturer som möter behoven hos din organisation och användare världen över.